<template>
  <van-nav-bar title="登录系统" left-text="返回" left-arrow @click-left="onClickLeft" />
  <van-form @submit="onSubmit">
    <van-field v-model="formData.username" name="username" label="用户名" placeholder="用户名" clearable
      :rules="[{ required: true, message: '请填写用户名' }]" />
    <van-field v-model="formData.password" type="password" name="password" label="密码" placeholder="密码" clearable
      :rules="[{ required: true, message: '请填写密码' }]" />
    <div class="captcha-image-bar">
      <a title="添加刷新图片" @click="flushCaptcha">
        <img :src="formData.captcha_random" />
      </a>
    </div>
    <van-field v-model="formData.captcha" name="captcha" center clearable label="图形验证码"
      :rules="[{ required: true, message: '请填写验证码' }]" placeholder="请输入验证码">
    </van-field>
    <van-field name="checkbox" label="记住登录状态">
      <template #input>
        <van-checkbox v-model="formData.remember" name="remember" />
      </template>
    </van-field>
    <div style="margin: 16px">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>
</template>

<script lang="ts" setup>
import { showFailToast, showLoadingToast } from "vant";
import { User, Wap } from "../../common/wap";
import { ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const formData = ref({
  username: "",
  password: "",
  captcha: "",
  remember: true,
  captcha_random: `/images/captcha/square?image=${Wap.getRandom()}.jpg`,
});

function onClickLeft() {
  router.push("/");
}
//刷新验证码
function flushCaptcha() {
  formData.value.captcha_random = `/images/captcha/square?image=${Wap.getRandom()}.jpg`;
}

// 数据提交
function onSubmit(values: KvObj) {
  let loading = showLoadingToast({
    message: "数提交中...",
    forbidClick: true,
    duration: 20 * 1000,
  });
  values.captcha_id = "square";
  values.remember = formData.value.remember;
  Wap.post("/api/login/user", values, { login: false })
    .then((result) => {
      let status = result.status;
      if (status === "error") {
        flushCaptcha();
        formData.value.captcha = "";
        showFailToast(result["msg"]);
      } else {
        if (status === "logged-in" || status === "ok") {
          Wap.saveLgRemeberUser(result.data);
          let lading = showLoadingToast({
            message: "登录成功即将跳转……",
            forbidClick: true,
            duration: 5000,
          });
          setTimeout(function () {
            lading.close();
            Wap.goHome();
          }, 3000);
          return;
        }
        formData.value.captcha = "";
      }
      loading.close();
    })
    .catch((error) => {
      console.log(error);
      formData.value.captcha = "";
      loading.close();
    });
}

(() => {
  // 做用户登录检测
  new User({
    onData() {
      if (this.isLogin) {
        let info = this.info;
        showLoadingToast({
          message: `【${info.account}】, 您已经登录系统，无须重复登录...`,
          forbidClick: true,
        });
        setTimeout(() => {
          router.push("/user");
        }, 3 * 1000);
      }
    },
  });
})();
</script>

<style scoped>
div.captcha-image-bar {
  text-align: right;
  padding: 5px;
  margin-right: 10px;
}
</style>
